﻿@using NewRen.Models;
@using NewRen.Models.ViewModel
@{
    vUser user = ViewBag.User as vUser;
    ViewBag.Title = "牛人充值";
    Layout = "~/Views/Shared/_Layout_Show.cshtml";
}
<style type="text/css">
    .clear:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    html {
        width: 100%;
    }

    body {
        margin: 0;
        padding: 0;
        width: 100%;
        color: #111;
        font-family: "PingHei", STHeitiSC-Light, "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
        font-size: 1em;
    }

    .clear {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

       .clear li{
            float: left;
            margin: 1em 1em;
        }

            .clear li img {
                cursor: pointer;
                width: 158px;
                border: rgba(0, 0, 0, 0.2) 2px solid;
            }

                .clear li img:hover {
                    box-shadow: 0 0 2px #0CA6FC;
                    border: #0CA6FC 2px solid;
                }

    .button {
        cursor: pointer;
        display: block;
        line-height: 45px;
        text-align: center;
        width: 158px;
        height: 45px;
        margin-top: 1.5em;
        border: rgba(123, 170, 247, 1) 1px solid;
        color: #fff;
        font-size: 1.2em;
        border-top-color: #1992da;
        border-left-color: #0c75bb;
        border-right-color: #0c75bb;
        border-bottom-color: #00589c;
        -webkit-box-shadow: inset 0 1px 1px 0 #6fc5f5;
        -moz-box-shadow: inset 0 1px 1px 0 #6fc5f5;
        box-shadow: inset 0 1px 1px 0 #6fc5f5;
        background: #117ed2;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#37aaea", endColorstr="#117ed2");
        background: -webkit-gradient(linear, left top, left bottom, from(#37aaea), to(#117ed2));
        background: -moz-linear-gradient(top, #37aaea, #117ed2);
        background-image: -o-linear-gradient(top, #37aaea 0, #117ed2 100%);
        background-image: linear-gradient(to bottom, #37aaea 0, #117ed2 100%);
    }

        .button:hover {
            background: #1c5bad;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2488d4", endColorstr="#1c5bad");
            background: -webkit-gradient(linear, left top, left bottom, from(#2488d4), to(#1c5bad));
            background: -moz-linear-gradient(top, #2488d4, #1c5bad);
            background-image: -o-linear-gradient(top, #2488d4 0, #1c5bad 100%);
            background-image: linear-gradient(to bottom, #2488d4 0, #1c5bad 100%);
            -webkit-box-shadow: inset 0 1px 1px 0 #64bef1;
            -moz-box-shadow: inset 0 1px 1px 0 #64bef1;
            box-shadow: inset 0 1px 1px 0 #64bef1;
        }

    li.clicked img {
        box-shadow: 0 0 2px #0CA6FC;
        border: #0CA6FC 2px solid;
    }

    input {
        display: none;
    }
</style>
<div class="ucenter-left account-left-border">
    <div class="ucneter-l-head cf">
        <div class="ulhead-headicon">
            @if (user.Picture == null)
            {
                <img src="/Images/userphoto.png" width="50" height="50"
                     alt=@user.UserName style="border-radius:50%;" />
            }
            else
            {
                <img src="/User/ShowPicture/@user.ID" width="50"
                     alt=@user.UserName height="50" style="border-radius:50%;" />
            }

        </div>
        <div class="ulhead-info">
            <p class="ulhead-info-uname">@user.UserName</p>

            <div class="ulhead-info-tool">
                <a class="ulhead-icon icon-lock ucenter-mail " href="/User/PwdEdit/@user.ID" title="修改密码">
                    <div class="ucenter-mail-tip">修改密码</div>
                </a>
                <a href="/User/Edit/@user.ID"
                   class="ulhead-icon icon-setting ucenter-mail" title="设置个人信息"></a>
            </div>
        </div>
    </div>
    <div class="ucenter-l-list">
        <ul class="ullist-ul">
            <li id="uclick">
                <a href="/User/Show/@user.ID">个人中心</a>
            </li>
            <li id="uclick2">
                <a href="/User/DescriptionShow/@user.ID">个人概述</a>
            </li>
            <li id="uclick3">
                <a href="/User/Edit/@user.ID">账号设置</a>
            </li>
            <li id="uclick4">
                <a href="/User/IntegrationShow/@user.ID">收支明细</a>
            </li>
            <li id="uclick5">
                <a href="/User/CollectManager/@user.ID">我的收藏</a>
            </li>
            <li id="uclick6">
                <a href="/User/BrowseRecord/@user.ID">浏览记录</a>
            </li>
            <li id="uclick7" class="active">
                <a href="/User/PayMoney/@user.ID">充值</a>
            </li>
        </ul>
    </div>
</div>
<div class="ucenter-right cf">
    <div class="ucenter-right-head"><h3>充值</h3></div>
    <div class="ucenter-right-body">
        <div>
            <h2>商品名：在线支付</h2>
            <h4>应付总额： ¥10.00</h4>
            <p>请选择支付方式：</p>
            <p style="color:#aaa">(功能正在调试中。。。)</p>
        </div>
        <form action="/User/PayMoney/@user.ID" method="post" target="_blank">
            <input type="hidden" name="title" value="在线支付" />
            <input type="hidden" name="totalFee" value="1000"/>
            <div>
                <ul class="clear" style="margin-top: 20px">
                    <li class="clicked" onclick="paySwitch(this)">
                        <input type="radio" value="alipay" name="paytype" checked="checked" />
                        <img src="http://beeclouddoc.qiniudn.com/ali.png" alt="" />
                    </li>
                    <li onclick="paySwitch(this)">
                        <input type="radio" value="wechatQr" name="paytype" />
                        <img src="http://beeclouddoc.qiniudn.com/wechats.png" alt="" />
                    </li>
                    <li onclick="paySwitch(this)">
                        <input type="radio" value="unionpay" name="paytype" />
                        <img src="http://beeclouddoc.qiniudn.com/unionpay.png" alt="" />
                    </li>
                    <li onclick="paySwitch(this)">
                        <input type="radio" value="qralipay" name="paytype" />
                        <img src="http://beeclouddoc.qiniudn.com/alis.png" alt="" />
                    </li>
                    <li onclick="paySwitch(this)">
                        <input type="radio" value="aliwappay" name="paytype" />
                        <img src="http://beeclouddoc.qiniudn.com/aliwap.png" alt="" />
                    </li>
                </ul>
            </div>
            <div style="clear: both;">
                <input type="submit" class="button" value="确认付款" />
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    function paySwitch(that) {
        var li = document.getElementsByClassName("clicked");
        console.log(li);
        li[0].childNodes[1].removeAttribute("checked");
        li[0].className = "";
        that.className = "clicked";
        that.childNodes[1].setAttribute("checked", "checked");
    }
</script>